<template>
	<view class="pay-content">
		<!-- 板块一 -->
		<view class="patient-msg-show">
			<view class="information-title">
				<image src="@/static/img/pay/line.png" class="img"></image>
				<text>预约信息</text>
			</view>
			<!-- v-for="(item,index) in patient" :key="index" -->
			<view class="patient-msg-row" >
				<text>预约状态</text>
				<text>{{appointInfo.status|getApointmentStatus}}</text>
			</view>
			<view class="patient-msg-row" >
				<text>挂号序号</text>
				<text>{{appointInfo.serialNo?appointInfo.serialNo: '--'}}</text>
			</view>
			<view class="patient-msg-row" >
				<text>接诊医生</text>
				<text>{{appointInfo.expert?appointInfo.expert.realName: '--'}}</text>
			</view>
			<view class="patient-msg-row" >
				<text>就诊人</text>
				<text>{{appointInfo.userVisitCard?appointInfo.userVisitCard.username: '--'}}</text>
			</view>
			<view class="patient-msg-row" >
				<text>性别</text>
				<text>{{appointInfo.userVisitCard&&appointInfo.userVisitCard.sex=='1'?'男':'女'}}</text>
			</view>
			<view class="patient-msg-row" >
				<text>年龄</text>
				<text>{{ userAge }}</text>
			</view>
			<view class="patient-msg-row" >
				<text>就诊时段</text>
				<text>{{appointInfo.timeSlot||'--'}}</text>
			</view>
			<view class="patient-msg-row" >
				<text>就诊时卡号</text>
				<text>{{appointInfo.visitCardNo || '--'}}</text>
			</view>
			<view class="patient-msg-row" >
				<text>就诊医生</text>
				<text>{{appointInfo.expert?appointInfo.expert.realName: '--'}}</text>
			</view>
			<view class="patient-msg-row" >
				<text>院区场地</text>
				<text>{{appointInfo.site?appointInfo.site.siteName : '--'}}</text>
			</view>
			<!-- 
			 <view class="patient-msg-row">
			 	<view class="left-column">
			 		<view>电子健康卡</view>
			 		<view>点击右侧二维码放大</view>
			 	</view>
			 	<image src="../../../icon.png" mode="" class="img"></image>
			 </view>
			 -->
		</view>
		<!-- 板块二 -->
		<view class="patient-msg-show" v-if="isPay">
			<view class="information-title">
				<image src="@/static/img/pay/line.png" class="img"></image>
				<text>缴费信息</text>
			</view>
			<view class="patient-msg-row">
				<text>缴费金额</text>
				<text class="money">￥<text class="bigger">{{appointInfo.money || '免费'}}</text></text>
			</view>
			<view class="patient-msg-row">
				<text>缴费时间</text>
				<text>{{appointInfo.createTime|| '--'}}</text>
			</view>
		</view>
		
		<view class="patient-msg-show" v-if="appointInfo.prescriptionName">
			<view class="information-title">
				<image src="@/static/img/pay/line.png" class="img"></image>
				<text>诊断结果</text>
			</view>
			<view class="patient-msg-row">
				<text>诊断结果</text>
				<view class="diagnosticContent">
					<text>{{appointInfo.prescriptionName?appointInfo.prescriptionName:""}}</text>
				</view>
			</view>
		</view>
		
		<view class="patient-msg-show" v-if="appointInfo.expertAdvice">
			<view class="information-title">
				<image src="@/static/img/pay/line.png" class="img"></image>
				<text>处方信息</text>
			</view>
			<view class="patient-msg-row active" @tap="toRecipeDetail(appointInfo.expertAdvice)">
				<text>处方信息</text>
				<view class="diagnosticContent">
					<text>{{appointInfo.prescriptionName?appointInfo.prescriptionName:""}}</text>
					<u-icon color="#e1e1e1" style="vertical-align: middle;margin-left:5rpx" name="arrow-right" size="38"></u-icon>
					<!-- <image src="" mode=""></image> -->
				</view>
			</view>
		</view>
		
		<view class="patient-msg-show" v-if="file.length">
			<view class="information-title">
				<text style="margin-left: 16rpx;">附件</text>
			</view>
			<view  v-for="(item,index) in file" style="padding-bottom: 20rpx;background-color: #fff;border-radius: 12rpx;">
				<view class="patient-msg-row" :key="index">
					<view>
						<u-icon color="#e1e1e1" style="vertical-align: middle;margin-right:10rpx" name="file-text-fill" size="38"></u-icon>
						<text style="vertical-align: middle">{{item.fileName}}</text>
					</view>
					<view class="download_btn">
						<text></text>
						<!-- <text>预览</text> -->
						<text @tap="downFile(item.url)">下载</text>
					</view>
				</view>
				<u-line class="u-line" style="margin: 0 auto;" color="info" length="90%"></u-line>
			</view>
			
		</view>
		<!-- 板块三 -->
		<!-- <view class="patient-msg-show" v-if="isCancel">
			<view class="information-title">
				<img src="@/static/img/pay/line.png" alt="">
				<text>取消信息</text>
			</view>
			<view class="patient-msg-row" v-for="(item,index) in patient2" :key="index">
				<text></text>
				<text>缴费信息</text>
			</view>
		</view> -->
		<!-- 板块四 -->
		<!-- <view class="patient-msg-show" v-if="isCancel">
			<view class="information-title">
				<img src="@/static/img/pay/line.png" alt="">
				<text>缴费信息</text>
			</view>
			<view class="patient-msg-row" v-for="(item,index) in patient2" :key="index">
				<text></text>
				<text>缴费信息</text>
			</view>
		</view> -->
		<!-- 支付信息 -->
		<!-- <pay :payment="100" v-if="!isPay"></pay> -->
		<u-button v-if="isPay" :custom-style="customStyle" shape="circle" @tap="cancelOrder">取消预约</u-button>
		<!-- 模态框 -->
		<u-modal v-model="isshow" title=" " :title-style="{fontWeight:700}" width="80%" :show-confirm-button="false"
			confirm-text="去认证" :content-style="contentStyle">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
				<view class="modal-button">
					<view :style="cancelStyle" @tap="closeModal">取消</view>
					<view :style="confirmStyle" @tap="toCertification">确认取消</view>
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" class="toast"/>
		<view class="line_box"></view>
	</view>
</template>

<script>
	import {filterAge} from '@/utils/filters.js';
	import timeMenu from "@/pages/mine/myRegister/registerDetails.vue";
	import pay from "@/components/pay/pay.vue";
	import {API} from "@/config/myApi.js";
	export default {
		components: {
			timeMenu,
			pay
		},
		data() {
			return {
				isshow: true,
				isPay: true, //是否支付显示
				appointInfo: {},
				//就诊人信息
				patient: [],
				patient2: [{
					title: '缴费金额',
					main: '已预约',
				}, {
					title: '缴费时间',
					main: '12',
				}],
				//取消预约
				customStyle: {
					position: "fixed",
					bottom: "30rpx",
					width: "690rpx",
					height: "90rpx",
					// zIndex: 20000
				},
				isshow: false,
				content: '请先完成实名认证才可使用',
				// 确认样式
				confirmStyle: {
					width: "32%",
					height: "80rpx",
					color: "#fff",
					fontSize: "30rpx",
					fontWeight: "bold",
					lineHeight: "80rpx",
					backgroundColor: "#F4333C",
					borderRadius: "40rpx",
				},
				// 取消样式
				cancelStyle: {
					width: "32%",
					height: "80rpx",
					fontSize: "30rpx",
					fontWeight: "bold",
					lineHeight: "80rpx",
					backgroundColor: "#ECECEC",
					borderRadius: "40rpx",
				},
				// 内容样式
				contentStyle: {
					height: "80rpx",
					marginTop: "50rpx",
					marginBottom: "180rpx",
					color: "#666666",
					fontSize: "30rpx",
					fontWeight: "500",
					lineHeight: "80rpx",
					textAlign: "center"
				},
				file:[]
			};
		},
		filters:{
			getApointmentStatus(val){
				switch (val){
					case 1:
						return "已预约"
						break;
					case 2:
						return "会诊中"
						break;
					case 3:
						return "已完成"
						break;
					case 4:
						return "用户取消"
						break;
					case 5:
						return "过号"
						break;
					case 6:
						return "专家取消"
						break;
					default:
						return "待付款"
						break;
				}
			}
		},
		computed:{
			userAge(){
				if(Object.keys(this.appointInfo).length){
					if(this.appointInfo.userVisitCard){
						const d = new Date()
						return d.getFullYear() - parseInt(this.appointInfo.userVisitCard.birthday.slice(0,4))
					}
				}
			}
		},
		onLoad(option) {
			this.getUserRegister(option.id)
			// 发请求获取。。。
		},
		methods: {
			getUserRegister(id) {
				API.getUserRegister(id).then(res=>{
					if(res.code == 200) {
						this.appointInfo = res.result
						console.log(res.result);
					}
				})
				API.prescriptionDetailsAsync({id}).then(res=>{
					if(res.code === 200){
						if(res.result){
							this.file = res.result
							console.log("download",res.result);
						}
					}
					
				})
			},
			//点击选择预约时间，显示
			selectHandle() {
				this.showPopup = true;
			},
			// 关闭弹出框
			closeHandle() {
				this.showPopup = false;
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			addPerson() {
				// console.log("添加咨询人");
				uni.navigateTo({
					url: "/pages/addPatient/addPatient"

				})
			},
			// 点击取消显示模态框
			cancelOrder() {
				this.isshow = true;
			},
			//关闭模态框
			closeModal(){
				this.isshow = false;
			},
			// 确认取消
			toCertification(){
				this.isshow = false;
				const id = {
					id:this.appointInfo.id,
				}
				API.userRegisterCancel(id).then(res=>{
					console.log('取消成功',res)
					if(res.code==200) {
						this.$refs.uToast.show({
							title: '取消成功',
						})
						uni.navigateTo({
							url:"/pages/tabbar/user/myFunction?val=我的预约"
						})
					}
				})
			},
			
			//下载文件
			async downFile(url){
				uni.downloadFile({
						url: url,//下载地址，后端接口获取的链接
							success: (data) => {
								if (data.statusCode === 200) {
									uni.saveFile({//文件保存到本地
									    tempFilePath: data.tempFilePath, //临时路径
										success: function(res) {
											uni.showToast({
												icon: 'none',
												mask: true,
												title: '文件已保存：' + res.savedFilePath, //保存路径
												duration: 3000,
											});
											setTimeout(() => { //可要可不要 这里测试一下是否下载成功
												//打开文档查看
												uni.openDocument({
													filePath: res.savedFilePath,
													success: function(res) {
													    console.log('打开文档成功');
													}
												});
											}, 2000)
										}
									});
								}
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '失败请重新下载',
								});
							},
						});
			},
			toRecipeDetail(str){
				uni.setStorage({
					key:"recipe",
					data:str,
					success:()=>{
						uni.navigateTo({
							url:"/pages/tabbar/user/recipeDetail/recipeDetail"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line_box{
		height: 180rpx;
	}
	.pay-content {
		padding: 0rpx 30rpx;
		overflow: hidden;

		.patient-msg-show {
			margin-top: 30rpx;

			.information-title {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.img {
					width: 5rpx;
					height: 28rpx;
				}

				>text {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 10rpx;
				}
			}

			.patient-msg-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;
				border-radius: 12rpx;
				padding: 40rpx 24rpx 30rpx;

				>text:first-child {
					font-size: 30rpx;
					color: #999999;
				}

				>text:last-child {
					font-size: 30rpx;
					color: #333333;
				}

				.left-column {
					>view {
						margin-bottom: 16rpx;
					}
				}

				.img {
					width: 130rpx;
					height: 130rpx;
				}

				.money {
					font-weight: bold;
					color: #333333;

					.bigger {
						font-size: 44rpx;
					}
				}
			}

			.patient-msg-row:last-child {
				padding-bottom: 40rpx;
			}
		}
	}
	// 模态框
	.slot-content {
	
		.modal-button {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
	}
	.toast{
		width: 80%;
		height: 200rpx;
		border-radius: 30rpx;
	}
	.diagnosticContent{
		width: 451rpx;
		display: flex;
		justify-content: flex-end;
		 // display: -webkit-box; //使用了flex，需要加
		 //  overflow: hidden;     //超出隐藏
		 //  word-break: break-all; //纯英文、数字、中文
		 //  text-overflow: ellipsis;  //省略号
		 //  -webkit-box-orient: vertical; //垂直
		 //  -webkit-line-clamp: 1;  //显示一行
		 //  white-space:pre-line; 
	}
	.download_btn{
		width: 188rpx;
		display: flex;
		justify-content: space-between;
		color: #F4333C;
	}
	.active:active{
		background-color: #e1e1e1 !important;
	}
	.down_detail{
		background-color: #fff;
		padding: 20rpx 0 40rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
	}
</style>
